<template>
    <div className="fixed-table">
        <basic-container>
            <br/>
            <el-form v-model="SearchForm" ref="searchUserByName" :inline="true">
                <el-form-item>
                    <el-input v-model="SearchForm.username" placeholder="请输入用户姓名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="searchUser()">查询</el-button>
                </el-form-item>
            </el-form>
            <br/>
            <el-table
                    :data="resultData"
                    stripe
                    style="width: 100%;">
                <el-table-column
                        prop="realname"
                        label="姓名"
                        align="center"
                        header-align="center">
                </el-table-column>
                <el-table-column
                        prop="gender"
                        label="性别"
                        align="center"
                        header-align="center">
                    <template slot-scope="scope">
                        <el-tag
                                :type="getGender(scope.row.gender).style"
                                disable-transitions>{{getGender(scope.row.gender).text}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="area"
                        sortable
                        label="擅长领域"
                        align="center"
                        header-align="center">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <p>擅长领域: {{ scope.row.areas?scope.row.areas.split('#').join(' '):'未知' }}</p>
                            <div slot="reference" class="name-wrapper">
                                <span style="margin-left: 10px">{{scope.row.areas?scope.row.areas.split('#').join(' ').substring(0,8)+'...':'未知领域'}}</span>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="functions"
                        sortable
                        label="擅长职能"
                        align="center"
                        header-align="center">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <p>擅长职能: {{ scope.row.functions?scope.row.functions.split('#').join(' '):'未知' }}</p>
                            <div slot="reference" class="name-wrapper">
                                <span style="margin-left: 10px">{{scope.row.functions?scope.row.functions.split('#').join(' ').substring(0,8)+'...':'未知职能'}}</span>
                            </div>
                        </el-popover>
                    </template>

                </el-table-column>
                <el-table-column
                        prop="mobile"
                        label="手机号"
                        align="center"
                        header-align="center">
                </el-table-column>
                <el-table-column
                        prop="email"
                        align="center"
                        header-align="center"
                        label="电子邮箱">
                </el-table-column>
                <el-table-column
                        sortable
                        label="创建日期"
                        prop="createTime"
                        align="center"
                        header-align="center">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        align="center"
                        header-align="center">
                    <template slot-scope="scope">
                        <el-button
                                v-if="scope.row.status==0"
                                @click.native.prevent="handleRow(scope.$index, scope.row,'ban')"
                                type="text"
                                size="small">
                            注销用户
                        </el-button>
                        <el-button
                                v-if="scope.row.status==1"
                                @click.native.prevent="handleRow(scope.$index, scope.row,'active')"
                                type="text"
                                size="small">
                            激活用户
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <br/>
            <el-row type="flex" justify="center">
                <el-pagination
                        style="align-self:center"
                        background
                        layout="prev, pager, next"
                        :page-count="pages"
                        @current-change="changePage">
                </el-pagination>
            </el-row>
        </basic-container>
    </div>
</template>

<script>
    import BasicContainer from '@vue-materials/basic-container'
    import Config from '@myconfig/config.min'
    import axios from 'axios'

    export default {
        components: {BasicContainer},
        name: 'result-form',
        data() {
            return {
                currentPage: 1,
                pages: 1,
                resultData: [],
                SearchForm: {
                    username: ''
                }
            }
        },
        methods: {
            getGender(gender) {
                switch (gender) {
                    case 0:
                        return {
                            style: 'info',
                            text: '未知'
                        }
                    case 1:
                        return {
                            style: 'primary',
                            text: '男'
                        }
                    case 0:
                        return {
                            style: 'danger',
                            text: '女'
                        }
                }
            },
            getData() {
                this.$http
                    .get(
                        Config.baseUrl +
                        "/api/users/bole/all/"
                        +
                        this.currentPage
                    )
                    .then(function (rsp) {
                        if (
                            rsp.data.pageNum == this.currentPage
                        ) {
                            this.resultData = rsp.data.list;
                            this.pages = rsp.data.pages;
                        }
                    });
            },
            changePage(value) {
                this.currentPage = value;
                this.getData()
            },
            handleRow(index, row, type) {
                this.$http.post(Config.baseUrl + '/api/user/' + type + '/' + row.id).then(
                    function (rsp) {
                        if (rsp.data.code == 1) {
                            this.resultData[index].status = rsp.data.data
                            this.$message({
                                type: 'success',
                                message: rsp.data.message
                            })
                        } else {
                            this.$message({
                                type: 'error',
                                message: rsp.data.message
                            })
                        }
                    }
                )
            },
            searchUser() {
                let _this = this;
                axios({
                    method: 'get',
                    url: Config.baseUrl + "/api/system/search/1/" + _this.SearchForm.username,
                }).then(function (response) {
                    if (response.data.code != 1) {
                        _this.$notify({
                            title: '搜索失败',
                            message: response.data.message,
                            type: 'error'
                        });
                    } else {
                        _this.resultData = response.data.data;
                    }
                })
            }
        },
        mounted() {
            this.getData()
        }
    }
</script>

<style>


    .el-table .warning-row {
        background: #E6A23C;
    }

    .el-table .success-row {
        background: #67C23A;
    }

    .el-table .danger-row {
        background: #F56C6C;
    }

    .el-table .primary-row {
        background: #409EFF;
    }

    .el-table .info-row {
        background: #909399;
    }
</style>
